<template>
  <div class="equipment-container">
    <!-- 页面头部 -->
    <!-- <div class="page-header">
      <div class="header-title">
        <i class="el-icon-s-management"></i>
        <span>设备接收管理系统</span>
      </div>
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增接收</el-button>
    </div>-->
    <div class="out full_h">
      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="search-group">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索维护编号..."
            prefix-icon="el-icon-search"
            class="search-input"
            clearable
          ></el-input>
          <el-select v-model="filterStatus" placeholder="状态筛选" clearable>
            <el-option label="完成接收" value="completed"></el-option>
            <el-option label="待接收" value="pending"></el-option>
            <el-option label="接收中" value="processing"></el-option>
          </el-select>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>

      <!-- 表格区域 -->
      <div style="height: calc(100% - 82px); box-sizing: border-box" class="table-container">
        <div class="table-header">
          <div class="table-title">
            <i class="el-icon-document"></i>
            <span>保养记录列表</span>
          </div>
          <div class="table-actions">
            <!-- <el-button icon="el-icon-download" @click="handleExport">导出数据</el-button> -->
            <el-button icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
            <el-button  icon="el-icon-plus" @click="handleAddReceive">新增维护</el-button>
          </div>
        </div>
        <div
          class="table-area"
          style="overflow-y:hidden;height: calc(100% - 82px - 75px);box-sizing: border-box;padding: 15px;
}"
        >
          <el-table
            :data="[...eqpMaintainList, ...eqpMaintainList, ...eqpMaintainList, ...eqpMaintainList]"
            stripe
            style="width: 100%"
            height="100%"
          >
            <el-table-column prop="maintainNo" align="center" label="维保单号"></el-table-column>
            <el-table-column prop="dept" align="center" label="负责部门"></el-table-column>
            <el-table-column prop="maintainDt" width="100px" label="维保日期" align="center"></el-table-column>
            <el-table-column prop="totalCount" label="合计数量" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button class="look-btn-pre" type="text" size="small">查看</el-button>
                <el-button
                  class="edit-btn-pre"
                  type="text"
                  size="small"
                  @click="handleEditReceive"
                >编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <div class="pagination-info">共 {{ total }} 条记录，{{ Math.ceil(total / pageSize) }} 页</div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="curMode>0?'编辑设备维护信息':'新增设备维护'"
      :visible.sync="isEditDialog"
      width="70%"
      :before-close="handleEditClose"
    >
      <div class="edit-main flex col">
        <el-tabs v-model="currDialogTab" @tab-click="tabClickDialog">
          <el-tab-pane name="1" label="基本信息"></el-tab-pane>
          <el-tab-pane name="2" label="设备列表信息"></el-tab-pane>
        </el-tabs>
        <div class="out-basic-info padd-up-down-15" v-show="currDialogTab==1">
          <div class="basic-info padd-15 bg">
            <el-row>
              <el-form
                :model="baseForm"
                :rules="baseFormRules"
                status-icon
                ref="ruleForm"
                label-width="150px"
                class="demo-ruleForm"
              >
                <el-col :span="12">
                  <el-form-item label="维保单号">
                    <el-input :disabled="notEdit" type="text" v-model="baseForm.maintainNo"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="负责部门" prop="dept">
                    <el-input @focus="openDeviceSelect" type="text" v-model="baseForm.dept"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="维保日期" prop="maintainDt">
                    <el-date-picker
                      :disabled="!notEdit"
                      style="width: 100%;"
                      v-model="baseForm.maintainDt"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合计数量">
                    <el-input :disabled="notEdit" type="text" v-model="baseForm.totalCount"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="已完成数量">
                    <el-input :disabled="notEdit" type="text" v-model="baseForm.doneCount"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="待确认数量">
                    <el-input :disabled="notEdit" type="text" v-model="baseForm.toConfirmCount"></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
        </div>
        <template v-if="currDialogTab==2">
          <div class="edit-tit flex fl-up-down-ct padd-up-rt-15">
            <!-- <span class="padd-lt">设备列表信息</span> -->
            <span></span>
            <button type="button" class="maint-btn dash-btn-pre" @click="addDeviceBox">+ 新增设备信息</button>
          </div>
          <div class="device-list padd-up-down-15 f1">
            <div v-if="devices.length === 0" class="empty-state">
              <i>📋</i>
              <h3>暂无设备信息</h3>
              <p>请点击上方的新增设备按钮添加设备信息</p>
            </div>
            <div v-else v-for="(device, index) in devices" :key="device.id" class="card bg">
              <div class="card-header">
                <div class="card-title">设备 {{ index + 1 }}</div>
                <div class="btn-group">
                  <button class="action-btn delete-btn" @click="removeDevice(index)">删除</button>
                </div>
              </div>
              <el-row>
                <el-form
                  :model="device"
                  status-icon
                  ref="ruleForm"
                  label-width="150px"
                  class="demo-ruleForm"
                >
                  <el-col :span="12">
                    <el-form-item label="集团设备卡编号">
                      <el-input :disabled="notEdit" type="text" v-model="device.groupEqpCardNo"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备标识">
                      <el-input
                        :disabled="notEdit"
                        @focus="openDeviceSelect"
                        type="text"
                        v-model="device.eqpLabel"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="在用地点">
                      <el-input :disabled="notEdit" type="text" v-model="device.useLocation"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="维保类型">
                      <el-input :disabled="notEdit" type="text" v-model="device.maintainType"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="上次维保日期">
                      <el-input :disabled="notEdit" type="text" v-model="device.lastMaintainDt"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="本次维保完成日期" prop="currentMaintainFinishDt">
                      <el-input type="text" v-model="device.currentMaintainFinishDt"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20">
                    <el-form-item label="维保内容">
                      <el-input
                        resize="none"
                        style="width: 500px;"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容指派"
                        v-model="device.maintainContent"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24"></el-col>
                  <!-- maintainGuide -->
                  <el-col :span="24">
                    <el-form-item label="维保指引">
                      <div class="plan-tag point">
                        <el-tag
                          class="mr10"
                          @click="clickTag(tag)"
                          @close="closeTag(tag)"
                          v-for="tag in Object.values(device.maintainGuide)"
                          :key="tag.content"
                          closable
                          type
                        >{{tag.content}}</el-tag>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="所用工具耗材">
                      <el-button @click="addConsums" class="consum-btn">记录工具耗材</el-button>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>
          </div>
        </template>
        <div style="box-size: border-box" class="modal-footer flex">
          <el-button size="mini" @click="handleEditClose">取消</el-button>
          <el-button color="#1a4b8c" size="mini" @click="handleEditSave" type="primary">保存</el-button>
          <el-button color="#1a4b8c" size="mini" type="primary" @click="clickAssign">指派</el-button>
          <el-button color="#1a4b8c" size="mini" type="primary">确认</el-button>
          <el-button color="#1a4b8c" size="mini" type="primary">拒绝</el-button>
          <el-button color="#1a4b8c" size="mini" type="primary">完成维保</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="指派"
      :visible.sync="isAsgmtDialog"
      width="50%"
      :before-close="handleAssignClose"
    >
      <div class="asgmt-main" style="min-height:200px;padding:15px">
        <el-row>
          <el-form
            :model="asgmtBaseForm"
            :rules="asgmtBaseFormRules"
            status-icon
            ref="asgmtBaseForm"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-col :span="20">
              <el-form-item label="集团设备卡编号" prop="groupEquipmentCardNo">
                <el-input
                  @focus="focusDeviceSelect"
                  clearable
                  type="text"
                  v-model="asgmtBaseForm.groupEquipmentCardNo"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="维保类型" prop="maintType">
                <el-select
                  clearable
                  @blur="handleMaintTypeBlur"
                  style="width: 100%;"
                  v-model="asgmtBaseForm.maintType"
                  placeholder="请选择..."
                >
                  <el-option
                    v-for="item in maints"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item class="flex flex_rt">
                <el-button @click="handleAssignClose">取消</el-button>
                <el-button type="primary" @click="submitAssign">确定</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </el-dialog>
        <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="指派"
      :visible.sync="isAsgmtDialog2"
      width="50%"
      :before-close="handleAssignClose2"
    >
      <div class="asgmt-main" style="min-height:200px;padding:15px">
        <el-row>
          <el-form
            :model="asgmtBaseForm2"
            :rules="asgmtBaseFormRules2"
            status-icon
            ref="asgmtBaseFormRef2"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-col :span="20">
              <el-form-item label="维保负责人" prop="mntSup">
                <el-input
                  @focus="focusDeviceSelect2"
                  clearable
                  type="text"
                  v-model="asgmtBaseForm2.mntSup"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item class="flex flex_rt">
                <el-button @click="handleAssignClose2">取消</el-button>
                <el-button type="primary" @click="submitAssign2">确定</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="维保指引"
      :visible.sync="isLookPlan"
      width="50%"
      :before-close="handlePlanClose"
    >
      <div class="plan-main padd-15">
        <el-row>
          <el-form
            :model="planBaseForm"
            :rules="planBaseFormRules"
            status-icon
            ref="planBaseFormv"
            label-width="90px"
            class="demo-ruleForm"
          >
            <el-col :span="20">
              <el-form-item label="提示信息">
                <el-input clearable type="text" v-model="planBaseForm.content"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="录入方式">
                <el-radio-group v-model="planBaseForm.inputType">
                  <el-radio label="输入">输入</el-radio>
                  <el-radio label="单选">单选</el-radio>
                  <el-radio label="多选">多选</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label>
                <div class="tool-list">
                  <div
                    class="tool-item flex fl-up-down-ct gap10 mb5"
                    v-for="(tool, index) in planBaseForm.tools"
                    :key="index"
                  >
                    <el-input clearable v-model="tool.name" placeholder="请输入..." class="tool-input"></el-input>
                    <el-checkbox v-model="tool.isWarning" class="warn-checkbox">是否为预警值</el-checkbox>
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      size="mini"
                      class="delete-btn"
                    ></el-button>
                  </div>
                </div>
              </el-form-item>
              <!-- <div class="tool-item" v-for="(tool,i) in planBaseForm.tools" :key="i">
              <el-input type="text" class="input-control" v-model="tool.name" />-->
              <!-- <label class="warn-checkbox">
                  <input type="checkbox" checked /> 是否为预警值
                </label>
                <button class="delete-btn">
                  <i class="fa-solid fa-xmark"></i>
              </button>-->
              <!-- </div> -->
              <!-- <el-form-item label="选项设置" >
                <el-input clearable type="text" v-model="planBaseForm.optionType"></el-input>
              </el-form-item>-->
            </el-col>
          </el-form>
        </el-row>
      </div>
    </el-dialog>

    <el-dialog
      custom-class="main-maint-custom"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="记录工具耗材使用"
      :visible.sync="isConsumDialog"
      width="70%"
      :before-close="handleConsumClose"
    >
      <div class="main-maint edit-main">
        <div
          style="max-height: calc(80vh - 150px); overflow-y: auto"
          class="abmain-maint-tle padd-bt15 f1"
        >
          <el-form :model="consumFormTable" ref="consumFormTableRef">
            <el-table
              :header-cell-style="{ 'background-color': '#f8f9fa' }"
              :data="consumFormTable.toolMaterialsList"
              style="width: 100%"
            >
              <el-table-column label="名称">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`toolMaterialsList[${scope.$index}].name`"
                    :rules="consumRulesTable.name"
                  >
                    <el-input
                      @blur="
                        validateField(
                          `toolMaterialsList[${scope.$index}].name`
                        )
                      "
                      clearable
                      v-model="scope.row.name"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="型号">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`toolMaterialsList[${scope.$index}].model`"
                    :rules="consumRulesTable.model"
                  >
                    <el-input clearable v-model="scope.row.model"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="计量单位">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`toolMaterialsList[${scope.$index}].unit`"
                    :rules="consumRulesTable.unit"
                  >
                    <el-input clearable v-model="scope.row.unit"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="数量">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`toolMaterialsList[${scope.$index}].qty`"
                    :rules="consumRulesTable.qty"
                  >
                    <el-input clearable v-model="scope.row.qty"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="单价">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`toolMaterialsList[${scope.$index}].unitPrice`"
                    :rules="consumRulesTable.unitPrice"
                  >
                    <el-input clearable v-model="scope.row.unitPrice"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="金额">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`toolMaterialsList[${scope.$index}].amount`"
                    :rules="consumRulesTable.amount"
                  >
                    <el-input clearable v-model="scope.row.amount"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="备注">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`toolMaterialsList[${scope.$index}].remark`"
                    :rules="consumRulesTable.remark"
                  >
                    <el-input clearable v-model="scope.row.remark"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="handleDelConsum(scope.$index)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
        <div
          slot="footer"
          style="
            height: 120px;
            padding-top: 15px;
            box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
            background: #fff;
            box-sizing: border-box;
            margin: 0 -15px;
          "
        >
          <div class="padd-lt">
            <el-button class="maint-btn" size="mini" @click="addConsumRecord">+添加物品</el-button>
          </div>
          <div class="modal-footer flex" style="margin: 15px 0 0 0">
            <el-button size="mini" @click="handleConsumClose">取消</el-button>
            <el-button size="mini" @click="handleConsumSubmit" type="primary">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 随机配件对话框组件 -->
    <RandomPartsSelection
      :visible.sync="showPartsDialog"
      :initial-data="currentParts"
      @submit="handlePartsSubmit"
      @close="handlePartsClose"
    />
    <div v-if="showDeviceSelection" class="modal-overlay">
      <DeviceSelection
        ref="deviceSelector"
        :title="'选择设备'"
        :categories="categoryList"
        :initial-mode="selectionMode"
        :initial-selected="preSelectedDevices"
        :confirm-button-text="'确认选择'"
        @confirm="handleDeviceConfirm"
        @cancel="showDeviceSelection = false"
        @selection-change="handleSelectionChange"
        @mode-change="handleModeChange"
        @category-change="handleCategoryChange"
      />
    </div>
    <div v-if="showUserSelection" class="modal-overlay">
      <UserSelection
        ref="deviceSelector"
        :title="'选择用户'"
        :initialSelected="[]"
        :initial-selected="preSelectedDevices"
        :confirm-button-text="'确认选择'"
        @confirm="onUserConfirm"
        @cancel="showUserSelection = false"
        @selection-change="onUserSelectionChange"
        @mode-change="onUserModeChange"
        @category-change="onUserCategoryChange"
      />
    </div>
  </div>
</template>

<script>
import UserSelection from "../components/userpts.vue";
import DeviceSelection from "../components/deviceTablepts.vue";
import RandomPartsSelection from "../components/randpartsPts.vue";
export default {
  name: "EquipmentManagement",
  components: { DeviceSelection, RandomPartsSelection,UserSelection },
  data() {
    return {
      showUserSelection: false,
      isLookPlan: false,
      planBaseForm: {
        tools: []
      },
      planBaseFormRules: {},
      // 指派窗口
      isAsgmtDialog: false,
      isAsgmtDialog2: false,
      // 指派表单
      asgmtBaseForm: {
        groupEquipmentCardNo: "",
        maintType: ""
      },
      asgmtBaseForm2: {
        mntSup: ""
      },
      asgmtBaseFormRef2:null,
      // 指派规则
      asgmtBaseFormRules: {
        groupEquipmentCardNo: [
          {
            required: true,
            message: "请填写集团设备卡编号",
            trigger: ["blur", "change"]
          }
        ],
        maintType: [
          {
            required: true,
            message: "请选择维保类型",
            trigger: ["blur", "change"]
          }
        ]
      },
      asgmtBaseFormRules2: {
        mntSup: [
          {
            required: true,
            message: "请选择维保负责人",
            trigger: ["blur", "change"]
          }
        ]
      },
      // 维保类型列表
      maints: [
        {
          label: "年检",
          value: "年检"
        }
      ],
      notEdit: true,

      // 设备保养相关数据对象
      eqpMaintainList: [
        {
          maintainNo: "111", // 维保单号
          dept: "111", // 负责部门
          maintainDt: "3333", // 维保日期
          totalCount: 0, // 合计数量
          doneCount: 0, // 已完成数量
          toConfirmCount: 0, // 待确认数量
          status: "2", // 状态
          // 设备列表信息数组
          eqpInfoList: [
            {
              groupEqpCardNo: "", // 集团设备卡号
              eqpLabel: "", // 设备标识
              useLocation: "", // 在用地点
              maintainType: "", // 维保类型
              lastMaintainDt: "", // 上次维保日期
              currentMaintainFinishDt: "", // 本次维保完成日期
              maintainContent: "", // 维保内容
              // 待确认是数组还是对象
              // maintainGuide: [
              //   // 维保指引（含工具、注意事项）
              //   {
              //     plan: "工具",
              //     content: "", // 提示信息
              //     inputType: "", // 录入方式：可选值 'input'/'radio'/'multi'（对应“输入/单选/多选”）
              //     optionType: "", // 选项设置
              //     isWarning: false // 是否为预警值
              //   },
              //   {
              //     plan: "注意事项",
              //     content: "",
              //     inputType: "",
              //     optionType: "",
              //     isWarning: false
              //   }
              // ],
              maintainGuide: {
                // 维保指引（含工具、注意事项）
                tool: {
                  plan: "工具",
                  content: "工具", // 提示信息
                  inputType: "", // 录入方式：可选值 'input'/'radio'/'multi'（对应“输入/单选/多选”）
                  optionType: "",
                  tools: [
                    {
                      name: "扳手", // 选项设置
                      isWarning: false // 是否为预警值
                    },
                    {
                      name: "手套",
                      isWarning: true
                    }
                  ]
                },
                notes: {
                  plan: "注意事项",
                  content: "注意事项",
                  inputType: "",
                  optionType: "",
                  tools: []
                }
              },
              // “所用工具耗材”
              toolMaterialsList: [
                {
                  name: "", // 工具耗材名称
                  model: "", // 型号
                  unit: "", // 计量单位
                  qty: 0, // 数量
                  unitPrice: 0, // 单价
                  amount: 0, // 金额
                  remark: "" // 备注
                }
              ]
            }
          ]
        }
      ],
      baseFormRules: {
        dept: [
          {
            required: true,
            message: "请填写部门",
            trigger: ["blur", "change"]
          }
        ],
        maintainDt: [
          {
            required: true,
            message: "请选择维保日期",
            trigger: ["blur", "change"]
          }
        ]
      },
      baseForm: {
        eqpInfoList: []
      },
      // old
      // 随机配件
      andomAccessories: [],
      curMode: 0,
      tabPosition: "top",
      showPartsDialog: false,
      currentParts: [
        {
          name: "电池",
          model: "5号电池",
          enableDate: "2023-12-07",
          quantity: 10,
          remarks: "高性能碱性电池"
        },
        {
          name: "保护码",
          model: "标准型",
          enableDate: "2023-11-15",
          quantity: 5,
          remarks: "设备安全保护"
        }
      ],
      deviceIdCounter: 0,
      devices: [],
      // todo 新增
      statusMapp: {
        1: "运行中",
        2: "维修中",
        3: "待机中",
        4: "关机中"
      },
      isEditDialog: false,

      realData: {
        baseForm: {
          value1: "11",
          value2: "22",
          value3: "33"
        },
        sonTableData: [
          {
            id: 1,
            data1: "s",
            datalist: "112",
            data3: "113",
            data4: "2023-11-10 00:00:00",
            data5: "2",
            data6: "1"
          },
          {
            id: 2,
            data1: "111",
            datalist: "111",
            data3: "111",
            data4: "2023-10-26 00:00:00",
            data5: "111",
            data6: "1"
          },
          {
            id: 3,
            data1: "11124",
            data2: "1231",
            data3: "124",
            data4: "2023-10-27 00:00:00",
            data5: "152",
            data6: "2"
          },
          {
            id: 4,
            data1: "111",
            datalist: "111",
            data3: "111",
            data4: "2023-10-26 00:00:00",
            data5: "111",
            data6: "1"
          },
          {
            id: 5,
            data1: "11124",
            data2: "1231",
            data3: "124",
            data4: "2023-10-27 00:00:00",
            data5: "152",
            data6: "2"
          }
        ],
        maintTableData: [
          {
            data1: "清洗",
            data2: "11",
            data3: "1",
            data4: ""
          },
          {
            data1: "清洗",
            data2: "11",
            data3: "",
            data4: ""
          }
        ]
      },

      // todo
      showDeviceSelection: false,
      selectionMode: "multiple",
      preSelectedDevices: [],
      selectedDevices: [],
      deviceList: [
        {
          id: "EQ-2023-001",
          name: "高精度示波器",
          category: "演示用设备",
          spec: "带宽: 1GHz, 采样率: 5GS/s, 通道: 4",
          status: "available"
        },
        {
          id: "EQ-2023-002",
          name: "工业机器人",
          category: "生产设备",
          spec: "负载: 20kg, 重复定位精度: ±0.05mm",
          status: "inuse",
          disabled: true
        },
        {
          id: "EQ-2023-003",
          name: "服务器集群",
          category: "x86服务器",
          spec: "CPU: 2×Xeon Gold, 内存: 256GB, 存储: 4TB SSD",
          status: "available"
        },
        {
          id: "EQ-2023-004",
          name: "恒温恒湿试验箱",
          category: "仪器及试验设备",
          spec: "温度范围: -40℃~150℃, 湿度范围: 20%~98%",
          status: "maintenance"
        },
        {
          id: "EQ-2023-005",
          name: "电动叉车",
          category: "运输工具",
          spec: "载重: 2.5吨, 起升高度: 3.5米, 电池: 48V/600Ah",
          status: "available"
        }
      ],
      categoryList: [
        { id: "all", name: "全部设备", icon: "fas fa-th-list" },
        { id: "demo", name: "演示用设备", icon: "fas fa-tv" },
        { id: "production", name: "生产设备", icon: "fas fa-industry" },
        { id: "electronic", name: "电子设备", icon: "fas fa-laptop" },
        { id: "server", name: "x86服务器", icon: "fas fa-server" },
        { id: "server1", name: "x86服务器1", icon: "fas fa-server" },
        { id: "server2", name: "x86服务器2", icon: "fas fa-server" },
        { id: "server3", name: "x86服务器3", icon: "fas fa-server" },
        { id: "server4", name: "x86服务器4", icon: "fas fa-server" },
        { id: "server5", name: "x86服务器5", icon: "fas fa-server" },
        { id: "server6", name: "x86服务器6", icon: "fas fa-server" },
        { id: "server7", name: "x86服务器7", icon: "fas fa-server" },
        { id: "server8", name: "x86服务器8", icon: "fas fa-server" },
        { id: "server9", name: "x86服务器9", icon: "fas fa-server" },
        { id: "server10", name: "x86服务器10", icon: "fas fa-server" },
        { id: "server11", name: "x86服务器11", icon: "fas fa-server" },
        { id: "server12", name: "x86服务器12", icon: "fas fa-server" },
        { id: "server13", name: "x86服务器13", icon: "fas fa-server" },
        { id: "server14", name: "x86服务器14", icon: "fas fa-server" },
        { id: "server15", name: "x86服务器15", icon: "fas fa-server" },
        { id: "server16", name: "x86服务器16", icon: "fas fa-server" }
      ],
      searchKeyword: "",
      filterStatus: "",
      dateRange: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 479,
      currDialogTab: "1",
      recoredSelectUser: {},
      recoredSelectUsers: [],
      isConsumDialog: false,
      consumFormTable: {
        toolMaterialsList:[]
      },
      consumFormTableRef:null,
      consumRulesTable: {
        maintType: [
          {
            required: true,
            validator: this.validateMaintenanceType,
            trigger: ["blur", "change"]
          }
        ],
        value: [
          {
            required: true,
            validator: this.validateMaintenanceValue,
            trigger: ["blur", "change"]
          }
        ],
        period: [
          {
            required: true,
            validator: this.validateMaintenancePeriod,
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  methods: {
    clickAssign(){
      // this.showUserSelection=true;
      this.isAsgmtDialog2=true;
    },
    handleDelConsum(e) {
      this.consumFormTable.toolMaterialsList.splice(e, 1);
    },
    validateField(e) {
      console.log("验证字段:", e);
    },
    addConsums() {
      this.isConsumDialog = true;
    },
    addConsumRecord() {
      this.$nextTick(() => {
        const container = document.querySelector(".abmain-maint-tle");
        if (container) {
          container.scrollTo(0, 99999);
        }
      });
      this.consumFormTableRef = this.$refs.consumFormTableRef;
      this.consumFormTableRef.validate(valid => {
        if (valid) {
          this.consumFormTable.toolMaterialsList.push({
            name: "",
            model: "",
            unit: "",
            qty: 0,
            unitPrice: 0,
            amount: 0,
            remark: ""
          });
          console.log("提交表单");
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
    handleConsumClose() {
      this.isConsumDialog = false;
    },
    handleConsumSubmit() {},
    closeTag(e) {
      console.log("e-closeTag", e);
    },
    clickTag(e) {
      console.log("e-clickTag", e);
      this.planBaseForm = JSON.parse(JSON.stringify(e));
      this.isLookPlan = true;
    },
    handlePlanClose() {
      this.isLookPlan = false;
    },
     submitAssign2() {
      console.log('指派2');
     },
    submitAssign() {
      console.log("this.recoredSelectUser:", this.recoredSelectUser);
      this.devices.push({
        id: ++this.deviceIdCounter,
        groupEqpCardNo:
          (this.recoredSelectUser &&
            this.recoredSelectUser.integratedDeviceCardNumber) ||
          "000",
        eqpLabel:
          (this.recoredSelectUser && this.recoredSelectUser.deviceLabel) ||
          "111",
        useLocation:
          (this.recoredSelectUser && this.recoredSelectUser.usageLocation) ||
          "222",
        maintainType: this.asgmtBaseForm.maintType || "333",
        lastMaintainDt: "",
        currentMaintainFinishDt: "",
        maintainContent: "测试",
        maintainGuide: {
          // 维保指引（含工具、注意事项）
          tool: {
            plan: "工具",
            content: "工具", // 提示信息
            inputType: "", // 录入方式：可选值 'input'/'radio'/'multi'（对应“输入/单选/多选”）
            optionType: "",
            tools: [
              {
                name: "扳手", // 选项设置
                isWarning: false // 是否为预警值
              },
              {
                name: "手套",
                isWarning: true
              }
            ]
          },
          notes: {
            plan: "注意事项",
            content: "注意事项",
            inputType: "",
            optionType: "",
            tools: []
          }
        }
      });
      this.$nextTick(() => {
        const container = document.querySelector(".device-list");
        console.log("container", container);
        if (container) {
          container.scrollTo(0, 99999);
        }
      });
      this.isAsgmtDialog = false;
    },
    focusDeviceSelect() {
      this.showDeviceSelection = true;
    },
    focusDeviceSelect2() {
      this.showUserSelection = true;
    },
    handleMaintTypeBlur() {
      if (this.$refs.asgmtBaseForm) {
        this.$refs.asgmtBaseForm.validateField("maintType");
      }
    },
    tabClickDialog(e) {
      // this.currDialogTab = e._props.label;
      console.log("tabClickDialog-e", this.currDialogTab);
    },
    removeDevice(e) {
      this.devices.splice(e, 1);
    },
    // 处理配件提交
    handlePartsSubmit(partsData) {
      console.log("提交的配件数据:", partsData);
      this.currentParts = partsData;
      this.andomAccessories = partsData;
      this.$message.success("配件设置成功");
    },

    // 处理对话框关闭
    handlePartsClose() {
      console.log("配件对话框已关闭");
    },
    handleAssignClose() {
      this.isAsgmtDialog = false;
    },
    handleAssignClose2() {
      this.isAsgmtDialog2 = false;
    },
    addDeviceBox() {
      //
      this.isAsgmtDialog = true;
      return;
      this.devices.push({
        id: ++this.deviceIdCounter,
        deviceCardNo: "",
        manufacturer: "",
        assemblyDate: "",
        randomPart1: "",
        randomPart2: "",
        fixedAssetNo: "",
        manufacturerNo: "",
        assetCardNo: "",
        location: ""
      });
      this.$nextTick(() => {
        const container = document.querySelector(".device-list");
        console.log("container", container);
        if (container) {
          container.scrollTo(0, 99999);
        }
      });
    },

    handleEditSave() {
      console.log("submit");
    },
    openDeviceSelect() {
      console.log("1111");
      this.showDeviceSelection = true;
    },
    // todo 新增
    handleEditClose() {
      console.log("关闭编辑窗口");
      this.isEditDialog = false;
    },
    // 
    onUserConfirm(e){
      console.log('e1-用户',e);
      this.asgmtBaseForm2.mntSup=e.users[0].memberName;
      this.showUserSelection=false;
    },
    onUserSelectionChange(e){
      console.log('e2-用户',e);
    },
    onUserModeChange(e){
      console.log('e3-用户',e);
    },
    onUserCategoryChange(e){
      console.log('e4-用户',e);
    },
   
    // todo 新增
    handleDeviceConfirm(result) {
      console.log(
        "设备选择确认:",
        result,
        result.devices.length,
        result.devices
      );
      if (result.devices.length > 1) {
        this.recoredSelectUsers = result.devices;
      } else if (result.devices.length == 1) {
        this.recoredSelectUser = result.devices[0];
      }
      this.asgmtBaseForm.groupEquipmentCardNo =
        result.devices[0].integratedDeviceCardNumber;
      console.log("this.recoredSelectUser:::", this.recoredSelectUser);
      this.showDeviceSelection = false;
    },

    handleSelectionChange(deviceIds) {
      console.log("选择变化:", deviceIds);
    },

    handleModeChange(mode) {
      console.log("模式变化:", mode);
      this.selectionMode = mode;
    },

    handleCategoryChange(categoryId) {
      console.log("分类变化:", categoryId);
    },

    // 通过ref调用子组件方法
    clearSelection() {
      this.$refs.deviceSelector.clearSelection();
    },

    setSelection(deviceIds) {
      this.$refs.deviceSelector.setSelection(deviceIds);
    },
    handleSearch() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message.success("搜索完成");
      }, 500);
    },
    handleAddReceive() {
      this.curMode = 0;
      // this.$message.success("点击新增接收");
      // this.showDeviceSelection = true;
      this.isEditDialog = true;
    },
    handleEditReceive() {
      this.curMode = 1;
      this.isEditDialog = true;
    },
    handleClose(e) {
      this.isDialog1 = false;
    },
    handleView(row) {
      this.$message.info(`查看 ${row.receiveNo}`);
    },
    handleEdit(row) {
      this.$message.info(`编辑 ${row.receiveNo}`);
    },
    handleExport() {
      this.$message.success("导出数据成功");
    },
    handleRefresh() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message.success("数据已刷新");
      }, 800);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    },
    loadData() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>

<style scoped lang="scss">
.equipment-container {
  height: 100%;
  width: 100%;
  padding: 15px;
  // width: 100%;
  box-sizing: border-box;
}

/* 头部区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 24px;
  // padding: 0 8px;
}

.header-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2d3d;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-title i {
  color: #409eff;
  font-size: 28px;
}

/* 搜索和操作区域 */
.toolbar {
  background: white;
  padding: 20px;
  // border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  // margin-bottom: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-group {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 300px;
}

.search-input {
  flex: 1;
  max-width: 400px;
}

.filter-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 表格容器 */
.table-container {
  background: white;
  // border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: auto;
  min-height: 0;
}
.device-list {
  background: white;
  // border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: auto;
  min-height: 0;
}
.table-header {
  padding: 20px 24px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2d3d;
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 自定义表格样式 */
.custom-table {
  border: none;
}

.custom-table .el-table__header {
  // background: #f8f9fa;
}

.custom-table .el-table__header th {
  // background: #f8f9fa;
  color: #606266;
  font-weight: 600;
  border-bottom: 2px solid #eaeaea;
}

.custom-table .el-table__body tr:hover td {
  background: #f5f7fa !important;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-completed {
  background: #f0f9ff;
  color: #1890ff;
  border: 1px solid #d1e9ff;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.view-btn,
.edit-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.view-btn {
  background: #f0f9ff;
  color: #1890ff;
  border: 1px solid #d1e9ff;
}

.view-btn:hover {
  background: #1890ff;
  color: white;
}

.edit-btn {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.edit-btn:hover {
  background: #52c41a;
  color: white;
}

/* 分页区域 */
.pagination-container {
  padding: 20px 24px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafbfc;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  color: #606266;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .equipment-container {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-group {
    min-width: auto;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
// 新增
.edit-main {
  padding: 15px 15px 20px;
  box-sizing: border-box;
  max-height: calc(80vh - 35px);
  // border: 1px solid red;
  .edit-tit {
    // border-left: 4px solid #1a4b8c;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    // margin-bottom: 15px;
    padding-bottom: 15px;
  }
  .basic-info {
    border: 1px solid #ebeef5;
  }
  .edit-main-head {
    // max-height: calc(80vh - 60px);
    // overflow-y:auto
    min-height: 0;
  }
}
.abmain-maint-tle {
  overflow-y: auto;
  box-sizing: border-box;
}
.bg {
  // background-color: #f8f9fa;
}
.modal-footer {
  padding: 15px 20px;
  // height: 60px;
  // background-color: #f8f9fa;
  justify-content: flex-end;
  // gap: 10px;
  border-top: 1px solid #eaeaea;
  margin: 0 -15px;
  box-sizing: border-box;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #7f8c8d;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #bdc3c7;
}
.card {
  // background: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 15px;
  // margin-bottom: 10px;
  box-sizing: border-box;
  // border-left: 4px solid #3498db;
  animation: fadeIn 0.5s ease;
  min-height: 352px;
  margin-bottom: 15px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.card-title {
  font-size: 16px;
  color: #2c3e50;
  font-weight: 300;
}
.btn-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover {
  background-color: #c0392b;
}
.edit-tit {
  // border-left: 4px solid #1a4b8c;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.maint-btn {
  background: none;
  border: 1px dashed #1a4b8c;
  color: #1a4b8c;
  cursor: pointer;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}
.tag {
  display: inline;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  background-color: #f0f0f0;
  color: #5933e0;
  font-size: 14px;
  cursor: default;
  transition: all 0.2s ease;
  margin-right: 10px;
}
.tag span {
  padding-right: 7px;
}
.rand-mtl {
  height: 100px;
  width: 100px;
  border: 1px solid #aaa;
  box-sizing: border-box;
  cursor: pointer;
}
.consum-btn {
  background: none;
  border: 1px dashed #1a4b8c;
  color: #1a4b8c;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 4px;
  margin-top: 10px;
  transition: background 0.2s;
}

.edit-main {
  padding: 15px 15px 0;
  box-sizing: border-box;
  .edit-tit {
    // border-left: 4px solid #1a4b8c;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .basic-info {
    border: 1px solid #ebeef5;
  }
}
</style>